<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
	<title>2016宣策招新</title>
	<link rel="shortcut icon" type="image/x-icon" href="image/ico.png" media="screen" />
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<link rel="stylesheet" type="text/css" href="css/memu.css">
	<link rel="stylesheet" type="text/css" href="css/form.css">
	<link rel="stylesheet" type="text/css" href="css/chuandan.css">
	<link rel="stylesheet" type="text/css" href="css/poster-animate.css">
	<link rel="stylesheet" type="text/css" href="css/carema.css">
	<link rel="stylesheet" type="text/css" href="css/first.css">
	<link rel="stylesheet" type="text/css" href="css/svg.css">
	<link rel="stylesheet" type="text/css" href="css/svg-car-animation.css">
	<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
	<script type="text/javascript" src="js/animate-diretor.js"></script>
	<script type="text/javascript" src="js/4Touch.js"></script>
	<script type="text/javascript" src="js/xbtn.js"></script>
	<script type="text/javascript" src="js/form.js"></script>
	<script type="text/javascript" src="js/carema.js"></script>
</head>
<body>
	<div class="nav">
		<div class="memu"><img src="image/memu.png" height="22" alt=""></div>
		<center><h3>招贤纳士</h3></center>
		<a class="nav-a" style="margin-top: 15px;" href="#top">顶部</a><hr>
		<a class="nav-a" href="#ps-intro">关于PS</a><hr>
		<a class="nav-a" href="#ps-animate">一张海报</a><hr>
		<a class="nav-a" href="#camara-intro">摄影介绍</a><hr>
		<a class="nav-a" href="#camara-animate">摄影演示</a><hr>
		<a class="nav-a" href="#join-us-a">加入我们</a><hr>
		<a class="nav-a" href="about" target="_blank">关于开发团队</a><hr>
	</div>

	<div class="a-target" id="top"></div>
	<div class="firstContainer" >
		<img id="first-pic" src="http://119.29.173.12/xPage/image/first.png" width="90%" alt="welcome">
		<img class="svg-car" src="image/vector/circle-purple.svg" alt="">
		<img class="svg-car" src="image/vector/circle-orange.svg" alt="">
		<img class="svg-car" src="image/vector/circle-cyan.svg" alt="">
		<img class="svg-car" src="image/vector/circle-purple.svg" alt="">
		<img class="svg-car" src="image/vector/circle-cyan.svg" alt="">
		<img class="svg-car" src="image/vector/circle-orange.svg" alt="">
		<img class="svg-car" src="image/vector/circle-purple.svg" alt="">
		<img class="svg-car" src="image/vector/circle-orange.svg" alt="">
		<img class="svg-car" src="image/vector/circle-cyan.svg" alt="">
		<img class="svg-car" src="image/vector/circle-orange.svg" alt="">
		<img class="svg-car" src="image/vector/circle-cyan.svg" alt="">
		<img class="svg-car" src="image/vector/circle-purple.svg" alt=""> 
		<img class="svg-car" style="opacity: 1;" src="image/vector/circle-purple.svg">
	</div>
	
	<h1 id="first-text">WE WANT YOU</h1>
	
	<div class="a-target" id="ps-intro"></div>
	<div class="fir-3circle first-ps">
		<img src="image/vector/circle-purple.svg" width="45" />
		<img src="image/vector/circle-orange.svg" width="30" />
		<img src="image/vector/circle-cyan.svg" width="30" />
		<img class="psicon" src="image/ps.png" width="60">
		<div class="msg">
			<p>　　Photoshop，简称“PS”，主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。</p>
			<div class="lr">
				<div class="lr-title">PS技术</div>
				<div></div>
				<div style="height: 5em;" class="ur">
					<p>PS Teach</p>
					<div>学习使用PS</div>
				</div>

				<div style="height: 5em;" class="ur">
					<p>&nbsp;&nbsp;PS Use&nbsp;&nbsp;</p>
					<div>用PS做海报传单</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="a-target" id="ps-animate"></div>
	<div class="poster-intro">
		<div class="title">&gt;所见即所得</div>
		<p class="text">海报被用于宣传，且是最必要的宣传方式</p>
		<!-- <p class="text">something texted here.</p> -->
	</div>
	<div class="poster-container">
		<img class="animate-img" id="black" src="image/animate/black.png">
		<div class="animate-screen">	
			<img src="image/animate/background.jpg" width="320" alt="">
			<img class="animate-img" id="animate-lamb" src="image/animate/lamb.png" width="320">
			<img class="animate-img" id="animate-left-bottom" src="image/animate/left-bottom.png">
			<img class="animate-img" id="animate-right-bottom" src="image/animate/right-bottom-logo.png">
			<img class="animate-img" id="animate-middle" src="image/animate/middle-text.png">
			<img class="animate-img" id="animate-pacman" src="image/animate/pacman.png">
			<img class="animate-img" id="animate-main-text" src="image/animate/main-text.png">
		</div>
	</div>
	<span style="position: relative;"><div class="PS"><p>PS</p></div></span>

	<div class="chuandan-intro">
		<div class="title">&gt;传单</div>
		<p class="text">在木棉菁英学生会中，宣策用海报和传单为每个活动拉开帷幕</p>
		<!-- <p class="text">something texted here.</p> -->
	</div>
	<div class="chuandan">
		<div class="blue_back">
			<div class="img">
				<img class="vvv" src="http://119.29.173.12/xPage/image/chuandan/kaimu_03.jpg">
				<img class="computer" src="http://119.29.173.12/xPage/image/chuandan/computer_03.jpg">
			</div>
		</div>
		<div class="red_back"></div>
	</div>
	<span style="position: relative;"><div class="PS-chuandan"><p>PS</p></div></span>

	<div class="a-target" id="camara-intro"></div>
	<div class="fir-3circle first-ps">
		<img src="image/vector/circle-purple.svg" width="45" />
		<img src="image/vector/circle-orange.svg" width="30" />
		<img src="image/vector/circle-cyan.svg" width="30" />
		<img class="psicon" src="image/camera.png" width="60">
		<div class="msg">
			<p>　　单镜头反光式取景照相机，又称作单反相机。它是指用单镜头并通过此镜头反光取景的相机</p>
			<p>　　拍照的时候又要考虑光和角度还有各种各样的“玄学”，拍一张好照片不是一蹴而就，需要一定的练习，甚至需要运气。</p>
			<div class="lr">
				<div class="lr-title">摄影流程</div>
				<div style="height: 5em;" class="ur">
					<img style="position: absolute;right: 0;margin-top: -25px;" src="image/take/USB.png" height="80">
					<div>拍照后传至PC</div>
				</div>

				<div style="height: 5em;" class="ur">
					<img style="position: absolute;left: 0;margin-top: -25px;" height="80" src="image/take/laptop.png" alt="">
					<div>对图片裁剪和润色</div>
				</div>
				<div style="height: 5em;" class="ur">
					<img style="position: absolute;right: 0;margin-top: -25px;" height="80" src="image/take/cloud.png" alt="">
					<div>最后分享给其他部门</div>
				</div>
			</div>
		</div>
	</div>

	<div class="a-target" id="camara-animate"></div>
	<div class="area-display" id="carema">
		<p id ="animate_content" class="content">以摄影的方式贯穿<br/>整个活动，并在后期进行<br/>照片整理与资源分享</p>
		<img id="animate_flicker" src="image/carema/flicker.png">
		<div id ="animate_shadow" class="shadow"></div>
		<div id ="animate_blur" class="blur"><img src="image/carema/clear_photo.jpg"></div>
		<img id ="animate_focus" class ="focus" src="image/carema/focus.png">
		<div id ="animate_lens" class="lens"></div>
	</div>

	<!-- Form -->
	<div class="a-target" id="join-us-a"></div>
	<div class="form">
		<div class="form_back">
			<div class="title">计算机学院学生会宣策部报名表</div>

			<div style="margin-left: 12px;text-align: left;">
				
				<div class="block">
						<div class="title1 name">姓名:</div>
						<div><input type="text" placeholder="你的名字" class="frame Name"></input></div>
					</div>	
					<div class="block">
						<div class="sex title1 ">
							<label class="uctitle">性别:</label>
							<input type="radio" id="Male" name="UserSex" value="1" checked="checked"></input>
							<label class="ucsex" for="Male">男</label>         
							<input type="radio" id="Female" name="UserSex" value="0"></input>
							<label class="ucsex" for="Female">女</label>
						</div>
					</div>
					
					<div class="block">
						<div class="title1 pro-class">选择专业和班级</div>
						<select class="proSelect" id="day" name="">
							<option value="0">选择专业</option>
							<option class="o" id="ddd" position="0" value="网络工程">网络工程</option>
							<option class="o" position="1" value="软件工程">软件工程</option>
							<option class="o" position="2" value="信息安全">信息安全</option>
							<option class="o" position="3" value="计算机科学与技术">计算机科学与技术</option>
						</select>

						<select class="classSelect" id="time" name="">
							<option value="0">选择班别</option>
							<option value="1">哇</option>
							<option value="-1">请先选专业</option>
							<option value="4">选了专业</option>
							<option value="5">这儿会自动刷新</option>
						</select>
					</div>

					<div class="block">
						<div class="title1 tel">联系电话:</div>
						<div><input type="tel" placeholder="telenumber" class="frame Phone"></input></div>
					</div>
					<div class="block">
						<div class="title1 email">e-mail</div>
						<div><input type="email" placeholder="email" class="frame Email"></input></div>
					</div>
					<div class="block">
						<div class="title1 qq">QQ</div>
						<div><input type="tel" placeholder="qq" class="frame QQ"></input></div>
					</div>
					<div class="block bottom">
						<div class="title1 intro">个人介绍:</div>
						<div><textarea placeholder="写上你的爱好，特长，展示你出色的一方面，不超过250个字" class="frame Intro" rows="10"></textarea></div>
					</div>
			</div>
		</div>
	</div>

	<div class="form">
	  <div class="sent">
	   <button type="submit">JOIN US</button>
	  </div>
    </div>

	<div class="a-target" id="about-us-a"></div>
	<div class="bottom-about">
		<img src="image/bottom.jpg">
		<div class="msg">
			<span></span><p><a href="https://github.com/eczn/xPage/" target="_blank">Github</a></p>
			<span></span><p><a href="about" target="_blank">关于开发团队...</a></p>
			<p>xPage由宣策部强力驱动</p>
		</div>
	</div>

	<div id="success">
		<span></span>
		<img id="welcome-pic" src="image/welcome/001.jpg" width="100">
		<div class="msg">
			<p>我们真诚地欢迎你</p>
			<p>加入宣策 以此开始你</p>
			<p>大学生活的不平凡</p>
		</div>
		<img id="ps-icon" src="image/welcome/psicon.png" width="60">
		<img id="ps-icon" style="left: 20px;" src="image/camera.png" width="60">
		<img id="ps-icon" style="left: 100px;" src="image/take/laptop.png" alt="" width="60">
		<div id="success-return" class="return"><h3>返回</h3></div> 
	</div>
</body>
<script type="text/javascript">
	var xPageForm = new successInit(); 
	$(document).ready(function(){
		var posterAnimate = new Movie();

		// btn, target, openClass, closeClass
		var myMemu = memuInit('memu', 'nav', 'nav-memu-open', 2); 
		// $(".memu").click(function(){
		// 	//.nav-memu-open
		// 	$(".nav").addClass("nav-memu-open"); 
		// });

		$(".ur").click(function(){});

		$("#success-return").click(function(){
			$("#success").css("display","none");
		});

		$(".bottom-about").css("height",parseInt($(".bottom-about").css("width"))*0.467+"px");

		// svg-car
		var mySvgCar = new Car_Animate_Diretor();
		setTimeout(mySvgCar.car,5000);

		// $(".animate-screen").trigger("mouseenter"); 
		$("#black").click(function(){
			posterAnimate.ka();
			this.onclick = function(){return false}; 
		}); 

	}); 
</script>
</html>
